<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>关系曲线图</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
	</head>

	<body>
		<div id="app">
			<el-row >
				<el-col :span="12">
					<div id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>
			
		</div>
		<script>
			new Vue({
				el:'#app',
				data:function(){
					return{
						
					}
				},
				mounted:function(){
					var myChart = echarts.init(document.getElementById('myChart'));
					var option = {
					    title: {
					        text: '有功功率关系曲线图'
					    },
					    tooltip: {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['330°-30°','30°-90°','90°-150°','150°-210°']
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        //bottom: '3%',
					        containLabel: true
					    },
					    toolbox: {
//					        feature: {
//					            saveAsImage: {}
//					        }
					    },
					    xAxis: {
					        type: 'category',
					        name:'风速[m/s]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					       data: ['0','5','10','15','20','25']
					    },
					    yAxis: {
					        type: 'value',
					        name:'有功功率[k值]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					    },
					    series: [
					        {
					            name:'330°-30°',
					            type:'line',
					            stack: '总量',
					            smooth: true,
					            data:[120, 132, 101, 134, 90, 230, 210]
					        },
					        {
					            name:'30°-90°',
					            type:'line',
					            stack: '总量',
					            smooth: true,
					            data:[220, 182, 191, 234, 290, 330, 310]
					        },
					        {
					            name:'90°-150°',
					            type:'line',
					            stack: '总量',
					            smooth: true,
					            data:[150, 232, 201, 154, 190, 330, 410]
					        },
					        {
					            name:'150°-210°',
					            type:'line',
					            stack: '总量',
					            smooth: true,
					            data:[320, 332, 301, 334, 390, 330, 320]
					        }
					    ]
					};

				    myChart.setOption(option)
				}
			})
		</script>
	</body>

</html>